<template>
	<view>
		<view class="search-contont flex-align">
			<view class="search-name flex-align">
				<u-icon name="search" color="#BDBDBD"></u-icon>
				<u--input placeholder="账号" border="surround" v-model="value" @change="contactChange"></u--input>
			</view>
			<u-button type="primary" text="搜索" color="#1872FF"></u-button>
		</view>
		<u-index-list :index-list="indexList" class="select_friend">
			<template v-for="(item, index) in itemArr">
				<!-- #ifdef APP-NVUE -->
				<u-index-anchor :text="indexList[index]"></u-index-anchor>
				<!-- #endif -->
				<u-index-item>
					<!-- #ifndef APP-NVUE -->
					<u-index-anchor v-show="indexList[index]" :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<!-- <view class="list-cell" v-for="(cell, index) in item">
						{{cell}}
					</view> -->
					<u-cell v-for="(cell, index) in item">
						<view slot="title" class="u-slot-title flex-between">
							<u-checkbox-group>
								<u-checkbox v-model="checked" shape="circle"></u-checkbox>
							</u-checkbox-group>
							<u-avatar src="" shape="square" size="40"></u-avatar>
							<u--text class="siteutext" :text="cell.title" color="#2C2C2C" size="28rpx"></u--text>
						</view>
					</u-cell>
				</u-index-item>
			</template>
		</u-index-list>
		<view class="create-group flex-justify">
			<u-button type="primary" text="完成" color="#1872FF"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				checked: false,
				indexList: [""],
				itemArr: [
					[{
							avatar: '',
							title: '列表A1'
						},
						{
							avatar: '',
							title: '列表A2'
						},
						{
							avatar: '',
							title: '列表A3'
						},
					]
				]
			};
		},
		methods: {
			contactChange(value) {
				console.log(value, this.value, 'oooo')
			}
		}
	}
</script>

<style lang="less">
	.search-contont {
		padding: 34rpx 34rpx;
		background-color: #ffffff;

		::v-deep .uni-input-placeholder {
			font-size: 32rpx !important;
			color: #BDBDBD !important;
		}

		::v-deep .uni-input-input {
			font-size: 32rpx;
			color: #3D3D3D;
		}
	}

	.search-contont .u-button {
		width: 110rpx;
		height: 80rpx;
		background: #1872FF;
		border-radius: 0rpx 16rpx 16rpx 0rpx;
		border: 2rpx solid #1872FF;
	}

	::v-deep .search-contont .u-icon__icon span {
		font-size: 56rpx;
		font-weight: bold;
	}

	::v-deep .search-contont .u-button__text span {
		font-size: 32rpx;
	}

	.search-name {
		width: 100%;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 2rpx 0rpx 0rpx 16rpx;
		border: 2rpx solid #1872FF;
		box-sizing: border-box;
		padding-left: 22rpx;
		column-gap: 5rpx;
		align-items: center;
	}

	.siteutext {
		white-space: nowrap;
	}

	.u-slot-title {
		column-gap: 20rpx;
	}

	.select_friend {
		margin-top: 24rpx;
	}

	::v-deep .select_friend .u-line {
		border: none !important;
	}

	::v-deep .select_friend .u-line {
		width: 600rpx !important;
		height: 2rpx;
		background-color: #D8D8D8;
		width: 86.5% !important;
		position: absolute;
		right: 16rpx;
		bottom: 0;
	}

	::v-deep .u-cell:last-child {
		.u-line {
			height: 0rpx;
		}
	}

	::v-deep .u-cell {
		position: relative;
	}

	::v-deep .u-cell__body {
		background-color: #ffffff;
		padding-top: 16rpx;
		padding-bottom: 16rpx;
	}

	::v-deep .u-index-anchor {
		background-color: #F5F5F5 !important;
		height: 56rpx !important;

		.u-index-anchor__text span {
			color: #6D6D6D !important;
			font-size: 28rpx !important;
		}
	}

	::v-deep .u-checkbox__icon-wrap--circle {
		margin: 0;
	}

	.create-group {
		width: 100%;
		height: 138rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx -8rpx 16rpx 0rpx rgba(208, 208, 208, 0.3);
		position: fixed;
		bottom: 0;
		left: 0;

		::v-deep .u-button {
			width: 684rpx;
			height: 92rpx;
			background-color: #429CFD !important;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			span {
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}
	}
</style>